<template>
    <el-button type="primary" @click="dialogNewNotice = true">发布新公告</el-button>

    <el-table
        :data="noticeList"
        height="500"
        border
        style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="50">
        </el-table-column>
        <el-table-column
            prop="title"
            label="标题"
            width="200">
        </el-table-column>
        <el-table-column
            prop="detail"
            label="内容"
            width="600">
        </el-table-column>
         <el-table-column
            prop="date"
            label="日期" 
            width="250">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作">
            <template #default="scope">
                <el-button @click="openEditNotice(scope.row)" type="primary" plain size="small" >编辑</el-button>
                <el-button type="danger" plain size="small" @click="deleteNotice(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

     <el-dialog v-model="dialogNewNotice" title="发布新公告" class="abow_dialog" style="height: 60%" width="600">
        <el-form :model="newNotice">
            <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="newNotice.title" autocomplete="off" />
            </el-form-item>
             <el-form-item label="内容" :label-width="formLabelWidth">
                  <el-input
                    v-model="newNotice.detail"
                    :autosize="{ minRows: 2, maxRows: 6 }"
                    type="textarea"
                    placeholder="Please input"
                />
            </el-form-item>
        </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogNewNotice = false">取消</el-button>
                <el-button type="primary" @click="confirmNewNotice(newNotice)">
                发布
                </el-button>
            </span>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogEditNotice" title="编辑公告" class="abow_dialog" style="height: 60%" width="600">
            <el-form :model="notice">
                <el-form-item label="ID" :label-width="formLabelWidth">
                    <el-input v-model="notice.id" disabled/>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="notice.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input
                        v-model="notice.detail"
                        :autosize="{ minRows: 2, maxRows: 6 }"
                        type="textarea"
                        placeholder="Please input"
                    />
                </el-form-item>
            </el-form>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogEditNotice = false">取消</el-button>
                    <el-button type="primary" @click="confirmEditNotice(notice)">
                    确认修改
                    </el-button>
                </span>
                </template>
        </el-dialog>

</template>

<script setup>
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import NoticeService from "../../stores/NoticeService"
import axios from "axios";
import { ElMessageBox } from "element-plus";

const handleResult = (err, res) => {
     if(err){
        console.log(err)
        ElMessageBox.alert("请求服务器失败", '提示', {
            type : 'error',
            confirmButtonText: 'OK',
            callback: () => {
            },
        })
    }
    if(res){
        console.log(res)
        ElMessageBox.alert(res.msg, '提示', {
            type : 'success',
            confirmButtonText: 'OK',
            callback: () => {
                fetchNotice()
            },
         })
    }
}

//初始化数据
const noticeList = ref([]);
//从服务器获取所有公告
const fetchNotice = async ()=>{
    const [err, res] = await NoticeService.promise_process(NoticeService.getNotices());
    if(err){
        console.log(err)
        alert("请求服务器失败")
    }
    if(res){
    //console.log(res)
    noticeList.value = res.data
    }
}

//发布新公告
const dialogNewNotice = ref(false)
let newNotice = reactive({
    title: '',
    detail: '',
})
const confirmNewNotice = async (notice) => {
    dialogNewNotice.value = false
    const [err, res] = await NoticeService.promise_process(NoticeService.addNotice(notice));

    handleResult(err, res)
    newNotice.title = ''
    newNotice.detail = ''
    fetchNotice()
}


//编辑公告
const dialogEditNotice = ref(false)
let notice = reactive({
    date:'',
    detail: '',
    id: 0,
    title: ''
})

const openEditNotice = (row) => {
    dialogEditNotice.value = true
    notice = row
}
const confirmEditNotice = async (ntc) => {
    dialogEditNotice.value = false

    const [err, res] = await NoticeService.promise_process(NoticeService.editNotice(ntc))
    if(err){
        console.log(err)
        ElMessageBox.alert("编辑失败", '提示', {
            type : 'error',
            confirmButtonText: 'OK',
            callback: () => {
            },
        })
    }
    if(res){
        console.log(res)
        ElMessageBox.alert("编辑成功", '提示', {
            type : 'success',
            confirmButtonText: 'OK',
            callback: () => {
                fetchNotice()
            },
         })
    }
}

//删除公告
const deleteNotice = (ntc) => {
    ElMessageBox.confirm("您确定要删除这条公告吗", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
      const[err, res] = await NoticeService.promise_process(NoticeService.deleteNotice(ntc.id))
      handleResult(err, res)
        fetchNotice()
  })
}

//钩子函数
onMounted(fetchNotice)




</script>

<style scoped></style>